<template>
	<view class="container">
		<!-- <view class="top-tab">
			<scroll-view class="tab-box" scroll-x="true" >
				<view class="t-item" v-for="(item,i) in tebList" :key="i" @click="checkType(item)">
					<text :class="tab_index==item.type ?'select':''">{{item.text}}</text>
				</view>
			</scroll-view>
		</view> -->
		<view class="c-list">
			<template v-if="type == '1'">
				<view class="c-item" v-for="(item, i) in list" :key="item.id">
					<view class="info">
						<view class="left">
							<view class="name">
								{{ item.name }}
							</view>
							<view class="use">
								单个账号仅限1张{{
                  item.drawlimit > 0 ? "·共" + item.drawlimit + "张" : ""
                }}
							</view>
							<view class="date">
								领券当日起{{
                  item.validity ? item.validity + "天内可用" : "永久有效"
                }}
							</view>
						</view>
						<view class="right">
							<view class="num" v-if="item.type == 'discount'">
								{{ item.discount }}<text>折</text>
							</view>
							<view class="num" v-else> <text>￥</text>{{ item.price }} </view>
							<view class="text"> 满{{ item.limit }}元可用 </view>
						</view>
					</view>
					<view class="btn">
						<text>{{ item.rangetype_text }}可用</text>
						<button v-if="!item.user_status" class="btn-1" @click="receiveCoupon(item, i)">
							立即领取
						</button>
						<button v-else class="btn-2">已领取</button>
					</view>
				</view>
			</template>
			<template v-if="type == '2'">
				<view class="c-item" v-for="(item, i) in list" :key="item.id">
					<view class="info">
						<view class="left">
							<view class="name">
								{{ item.name }}
							</view>
							<view class="use">
								单个账号仅限1张{{
                  item.drawlimit > 0 ? "·共" + item.drawlimit + "张" : ""
                }}
							</view>
							<view class="date">
								领券当日起{{
                  item.validity ? item.validity + "天内可用" : "永久有效"
                }}
							</view>
						</view>
						<view class="right">
							<view class="num" v-if="item.type == 'discount'">
								{{ item.discount }}<text>折</text>
							</view>
							<view class="num" v-else> <text>￥</text>{{ item.reduce }} </view>
							<view class="text"> 满{{ item.achieve }}元可用 </view>
						</view>
					</view>
					<view class="btn">
						<text>{{ item.rangetype_text }}可用</text>
						<button v-if="!item.state" class="btn-1" @click="receiveCoupon(item, i)">
							立即领取
						</button>
						<button v-else class="btn-2">已领取</button>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getCouponList,
		receiveCoupon
	} from "@/utils/api/mallApi.js";
	import {
		couponGetlist,
		couponReceive
	} from "@/utils/api/serviceApi.js";
	export default {
		data() {
			return {
				tebList: [
					// {
					// 	id:1,
					// 	text:'推荐'
					// },
					// {
					// 	id:2,
					// 	text:'分类名称'
					// },

					{
						id: 1,
						type: "reduction",
						text: "满减券",
					},
					{
						id: 2,
						type: "discount",
						text: "折扣券",
					},
					{
						id: 3,
						type: "shipping",
						text: "包邮券",
					},
				],
				tab_index: "reduction",
				page: 1,
				total: 0,
				last_page: 0,
				list: [],
				type: "1", //1商城优惠券2服务优惠券
			};
		},
		onLoad(option) {
			this.type = option.type || "1";
			this.getList();
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++;
				this.getList();
			}
		},
		methods: {
			checkType(data) {
				this.tab_index = data.type;
				this.getList();
			},
			getList() {
				this.list = [];
				if (this.type == 1) {
					getCouponList({
						// type:this.tab_index,
						page: this.page,
					}).then((res) => {
						this.total = res.data.total;
						this.last_page = res.data.last_page;
						if (this.page == 1) {
							this.list = res.data.data;
						} else {
							this.list = [...res.data.data, ...this.list];
						}
					});
				}
				if (this.type == 2) {
					couponGetlist().then((res) => {
						this.list = res.data;
						//   this.total = res.data.total;
						//   this.last_page = res.data.last_page;
						//   if (this.page == 1) {
						//     this.list = res.data.data;
						//   } else {
						//     this.list = [...res.data.data, ...this.list];
						//   }
					});
				}
			},

			// 领取优惠券
			receiveCoupon(data, i) {
				uni.showLoading({
					title: "Loading...",
				});
				if (this.type == 1) {
					receiveCoupon({
						id: data.id
					}).then((res) => {
						let obj = this.list[i];
						obj.state = true;
						this.$set(this.list, i, obj);
						uni.hideLoading();
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 3000,
						});
					});
				}
				if (this.type == 2) {
					couponReceive({
						coupon_id: data.id
					}).then((res) => {
						let obj = this.list[i];
						obj.state = true;
						this.$set(this.list, i, obj);
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000,
						});
					});
				}
			},
		},
	};
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.container {
		.top-tab {
			padding: 24rpx 22rpx 0;
			box-sizing: border-box;
			background-color: #ffffff;

			.tab-box {
				white-space: nowrap;
				width: 100%;

				.t-item {
					display: inline-block;
					margin-left: 42rpx;
					margin-bottom: 22rpx;

					&:first-child {
						margin-left: 0;
					}

					text {
						font-weight: 400;
						font-size: 30rpx;
						color: #999999;
						line-height: 42rpx;

						&.select {
							color: #333333;
							position: relative;

							&::after {
								content: "";
								width: 60rpx;
								height: 4rpx;
								background: #e72a2a;
								border-radius: 2rpx;
								position: absolute;
								top: calc(100% + 10rpx);
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}
			}
		}

		.c-list {
			padding: 0 22rpx;
			box-sizing: border-box;

			.c-item {
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 20rpx;

				.info {
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						flex-direction: column;

						&>view {
							font-weight: bold;
							font-size: 24rpx;
							color: #333333;
							line-height: 34rpx;
							margin-top: 10rpx;
						}

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							line-height: 44rpx;
							margin-top: 0;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.num {
							font-weight: bold;
							font-size: 68rpx;
							color: #e72a2a;
							line-height: 96rpx;

							text {
								font-size: 36rpx;
							}
						}

						.text {
							font-weight: bold;
							font-size: 22rpx;
							color: #999999;
							line-height: 32rpx;
							margin-top: -14rpx;
						}
					}
				}

				.btn {
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 2rpx dashed #efefef;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						width: 24rpx;
						height: 24rpx;
						background: #f8f8f8;
						border-radius: 50%;
						top: 0;
						left: 0;
						transform: translateX(-50%) translateY(-50%);
					}

					&::after {
						content: "";
						position: absolute;
						width: 24rpx;
						height: 24rpx;
						background: #f8f8f8;
						border-radius: 50%;
						top: 0;
						right: 0;
						transform: translateX(50%) translateY(-50%);
					}

					&>text {
						font-weight: bold;
						font-size: 26rpx;
						color: #999999;
						line-height: 36rpx;
					}

					button {
						width: 156rpx;
						height: 52rpx;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						font-weight: bold;
						font-size: 26rpx;
						line-height: 52rpx;

						&.btn-1 {
							color: #ffffff;
							background: linear-gradient(131deg, #ffa233 0%, #fb4c4c 100%);
						}

						&.btn-2 {
							background: #efefef;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>